<template>
  <div class="">
    <van-nav-bar @click-left="$router.back()" left-arrow title="任务详情" fixed>
    </van-nav-bar>
    <main>
      <img src="../../assets/images/mine/taskDetail.png" alt="" />
      <div class="foot">
        <button>领取任务</button>
        <button>继续投放</button>
      </div>
      <p>*领取任务，动动手指推广可赚钱赏金！</p>
    </main>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    document.querySelector("html").style.backgroundColor = "#fff";
  },
};
</script>
<style scoped lang='less'>
/* @import url(); 引入css类 */
/deep/.van-nav-bar .van-icon {
  color: #666666;
}
main {
  margin-top: 46px;
  padding: 0 15px;
  img {
    margin-top: 100px;
    width: 100%;
    height: 258px;
  }
  .foot {
    display: flex;
    justify-content: space-around;
    align-items: center;
    button {
      width: 150px;
      height: 40px;
      background-color: #2976db;
      border-radius: 20px;
      color: #fff;
      border: none;
      &:last-of-type {
        border: 1px solid #2976db;
        border-radius: 21px;
        color: #2976db;
        background-color: #fff;
      }
    }
  }
  p {
    margin-top: 34px;
    text-align: center;
    font-size: 12px;
    color: #f11515;
  }
}
</style>